<div id="inputOperation">
    <!--页面调整-->
    <el-row v-loading="showLoading"
            element-loading-text="拼命加载中">
        <el-col :span="24">
            <div class="inner btn-nav">
                <button @click="newInput" class="btn btn-add"><i class="icon add"></i><span>添加</span></button>
                <button @click="moreOperationDelete" class="btn btn-del"><i class="icon del"></i><span>批量删除</span>
                </button>
                <button @click="dialogSelectVisible=!dialogSelectVisible" class="btn btn-search"><i
                        class="icon search"></i><span>详细查询</span>
                </button>
                <button @click="multiSelectClick" class="btn btn-multiSelect"><i class="icon sel"></i><span>多选</span>
                </button>
                <el-date-picker
                        v-model="date"
                        type="daterange"
                        align="right"
                        placeholder="选择日期"
                        class="datePicker"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-input
                        icon="search"
                        placeholder="入库单号"></el-input>
                <button
                        class="btn btn-edit"
                        @click="handleDelete">编辑
                </button>
                <button
                        class="btn btn-distribution"
                        @click="handleDelete">分配
                </button>
                <button
                        class="btn btn-receipt"
                        @click="handleDelete">再次收货
                </button>
                <button
                        class="btn btn-print"
                        @click="handleDelete">打印
                </button>
            </div>
            <el-table
                    :data="inputOperation"
                    :default-sort="{prop: 'sjsj', order: 'descending'}"
                    :max-height="570"
                    @toggleRowSelection="rowSelection"
                    @row-click="hello"
                    @expand="expandChange"
                    @selection-change="handleSelectionChange"
                    ref="table"
                    class="inputOperationTable"
                    style="width: 100%">
                <el-table-column
                        type="expand">
                    <template scope="props">
                        <el-carousel
                                arrow="hover"
                                indicator-position="none"
                                :autoplay="false">
                            <el-carousel-item>
                                <el-row>
                                    <el-col :span="10">
                                        <el-row
                                                v-loading="props.row.historyLoading"
                                                element-loading-text="拼命加载中">
                                            <el-col><h3>单号历史记录</h3></el-col>
                                            <el-col
                                                    :span="20"
                                                    style="min-height: 386px;height: 386px;overflow: scroll;">
                                                <el-steps
                                                        :space="100"
                                                        :active="props.row.historyLength"
                                                        process-status="success"
                                                        finish-status="finish"
                                                        direction="vertical">
                                                    <el-step
                                                            :title="history.createTime"
                                                            :description="history.description"
                                                            v-for="history in props.row.history"></el-step>
                                                </el-steps>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="14">
                                        <h3>入库详细</h3>
                                        <el-form label-position="left" inline class="demo-table-expand">
                                            <el-form-item label="入库单号">
                                                <span>{{ props.row.rkdjNo }}</span>
                                            </el-form-item>
                                            <el-form-item label="下单时间">
                                                <el-icon name="time"></el-icon>
                                                <span style="margin-left: 10px">{{ props.row.sjsj }}</span>
                                            </el-form-item>
                                            <el-form-item label="订单类型">
                                                <span>{{ props.row.type }}</span>
                                            </el-form-item>
                                            <el-form-item label="入库状态">
                                                <span>{{ props.row.status }}</span>
                                            </el-form-item>
                                            <el-form-item label="入库数量">
                                                <span>{{ props.row.number }}</span>
                                            </el-form-item>
                                            <el-form-item label="入库体积">
                                                <span>{{ props.row.volume }}</span>
                                            </el-form-item>
                                            <el-form-item label="制作方式">
                                                <span>{{ props.row.zdfs }}</span>
                                            </el-form-item>
                                            <el-form-item label="可用操作">
                                                <el-button
                                                        size="small"
                                                        @click="handleEdit(props.$index, props.row)">分配
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        @click="handleDelete(props.$index, props.row)">编辑
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        @click="deleteOlder(props.$index, props.row)">删除
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        @click="handleDelete(props.$index, props.row)">再次收货
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        @click="handleDelete(props.$index, props.row)">打印
                                                </el-button>
                                            </el-form-item>
                                            <el-form-item label="入库备注">
                                                <el-tooltip class="item" effect="dark" :content="props.row.remarks"
                                                            placement="top">
                                                    <span class="remark">{{ props.row.remarks }}</span>
                                                </el-tooltip>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                            </el-carousel-item>
                            <el-carousel-item>
                                <h3>入库明细</h3>
                                <el-table
                                        :data="props.row.rkdocsList"
                                        highlight-current-row
                                        style="width: 100%">
                                    <el-table-column
                                            type="index"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品编号"
                                            align="center"
                                            prop="goodsId">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="rkdjId"
                                            label="货品名称">
                                    </el-table-column>
                                    <el-table-column
                                            label="单位"
                                            prop="dwid"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            label="数量"
                                            prop="count"
                                            align="center">
                                    </el-table-column>
                                </el-table>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                <!--type="index"-->
                <!--width="55">-->
                <!--</el-table-column>-->
                <el-table-column
                        label="入库单号"
                        width="170"
                        show-overflow-tooltip
                        align="center"
                        prop="rkdjNo">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        prop="sjsj"
                        sortable
                        label="下单时间">
                    <template scope="scope">
                        <el-icon name="time"></el-icon>
                        <span style="margin-left: 10px">{{ scope.row.sjsj }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="类型"
                        prop="type"
                        align="center"
                        width="100"
                        :filters="[{ text: '采购订单', value: '采购订单' }, { text: '仓间挑拨', value: '仓间挑拨' }, { text: '退货入库', value: '退货入库' }]"
                        :filter-method="filterType">
                    <template scope="scope">
                        <el-tag
                                :type="typeWatch(scope.row.type)"
                                close-transition>{{scope.row.type}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        prop="status"
                        align="center"
                        width="100"
                        :filters="[{ text: '初始状态', value: '初始状态' }, { text: '部分分配', value: '部分分配' }, { text: '全部分配', value: '全部分配' }, { text: '部分收货', value: '部分收货' }, { text: '全部收货', value: '全部收货' }]"
                        :filter-method="filterStatus">
                    <template scope="scope">
                        <el-tag
                                :type="statusWatch(scope.row.status)"
                                close-transition>{{scope.row.status}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="总数量"
                        align="center"
                        show-overflow-tooltip
                        prop="number">
                </el-table-column>
                <el-table-column
                        label="总体积"
                        align="center"
                        show-overflow-tooltip
                        prop="volume">
                </el-table-column>
                <el-table-column
                        label="备注"
                        show-overflow-tooltip
                        prop="remarks">
                </el-table-column>
                <el-table-column
                        v-if="multiSelect"
                        type="selection"
                        width="60">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="inputOperation.length">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <el-dialog
            size="small"
            v-model="dialogFormVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">新建入库单</span>
            <el-steps
                    class="steps"
                    :space="120"
                    :active="dialogFormActive"
                    finish-status="success">
                <el-step title="基础信息"></el-step>
                <el-step title="入库明细"></el-step>
            </el-steps>
        </div>
        <el-form :model="form" ref="newForm">
            <el-carousel
                    ref="carousel"
                    :autoplay="false"
                    arrow="never"
                    indicator-position="none"
                    height="55vh">
                <el-carousel-item>
                    <el-row>
                        <el-col :span="24"><h3>入库基础信息</h3></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="入库单号" :label-width="formLabelWidth">
                                <el-input v-model="form.rkRkdjNo" auto-complete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="订单类型" :label-width="formLabelWidth">
                                <el-select v-model="form.rkType" placeholder="请选择单据类型">
                                    <el-option label="采购订单" :value="0"></el-option>
                                    <el-option label="仓间挑拨" :value="1"></el-option>
                                    <el-option label="退货入库" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库备注" :label-width="formLabelWidth">
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        v-model="form.rkRemarks"
                                        auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="2">
                            <el-form-item label="入库状态">
                                form.rkStatus
                            </el-form-item>
                            <el-form-item label="入库数量">
                                form.number
                            </el-form-item>
                            <el-form-item label="入库体积">
                                form.volume
                            </el-form-item>
                            <el-form-item label="制作方式">
                                form.zdfs=1 手动
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                    <el-row>
                        <el-col :span="24"><h3>入库明细</h3></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="货品编号" :label-width="formLabelWidth">
                                <el-autocomplete
                                        v-model="form.bgGoodsNo"
                                        :fetch-suggestions="querySearchAsync"
                                        @select="GoodSelect"
                                        auto-complete="off"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                    label="货品数量"
                                    :label-width="formLabelWidth"
                                    prop="selectGood.count"
                                    :rules="{ type: 'number', message: '货品数量必须为数字值'}">
                                <el-input
                                        type="count"
                                        :disabled="form.selectGood.value==''"
                                        v-model.number="form.selectGood.count"
                                        auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="货品编号" :label-width="formLabelWidth">
                                {{form.selectGood.value}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="货品名称" :label-width="formLabelWidth">
                                {{form.selectGood.bgGoodsName}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="货品数量" :label-width="formLabelWidth">
                                {{form.selectGood.count}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" :offset="16">
                            <el-button size="small" @click="saveARkDocsList" :disabled="form.saveARkDocsList">保存明细
                            </el-button>
                            <el-button size="small" @click="deleteARkDocsList" :disabled="form.deleteARkDocsList"
                                       type="danger">删除明细
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" style="margin-top: 5px">
                            <el-table
                                    height="200"
                                    :data="form.rkDocsList"
                                    @row-click="GoodClick">
                                <el-table-column
                                        type="index"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        property="value"
                                        label="货品编号">
                                </el-table-column>
                                <el-table-column
                                        property="bgGoodsName"
                                        label="货品名称">
                                </el-table-column>
                                <el-table-column
                                        property="bgDw"
                                        label="货品单位">
                                </el-table-column>
                                <el-table-column
                                        property="count"
                                        label="货品数量">
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="prev" v-show="dialogFormActive">上一步</el-button>
            <el-button type="primary" @click="next" v-show="dialogFormActive < 1">下一步</el-button>
            <el-button type="primary" @click="submit" :loading="submitLoading" v-show="dialogFormActive >= 1">保存
            </el-button>
        </div>
    </el-dialog>
    <el-dialog
            size="small"
            v-model="dialogSelectVisible">
        <div class="dialog-title clearfix" slot="title">
            <span class="el-dialog__title">详细查询</span>
        </div>
        <el-form :model="select">


        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectSubmit" :loading="selectLoading">查询</el-button>
        </div>
    </el-dialog>
</div>
<style>
    #inputOperation {
        width: 100%;
        min-width: 890px;
        position: relative;
    }

    #inputOperation .demo-table-expand {
        font-size: 0;
    }

    #inputOperation .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    #inputOperation .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    #inputOperation .el-table__expand-column .el-table__expand-icon {
        height: 39px;
    }

    #inputOperation .table {
        transition: 1s all;
    }

    #inputOperation .el-carousel__container {
        height: 440px;
    }

    .el-tooltip__popper {
        max-width: 400px;
    }

    .el-step__main {
        max-width: calc(100% - 60px);
    }

    #inputOperation .inputOperationTable {
        width: 95% !important;
        margin: 20px auto;
    }

    #inputOperation .datePicker {
        width: 140px !important;
        height: 24px !important;
        margin-top: 29px;
        margin-right: 18px;
        float: left;
    }

    #inputOperation .datePicker .el-input__inner {
        border-radius: 2px !important;
        height: 24px !important;
    }

    #inputOperation .add {
        background: url("/static/images/add.png") no-repeat center;
    }

    #inputOperation .del {
        background: url("/static/images/del.png") no-repeat center;
    }

    #inputOperation .search {
        background: url("/static/images/search.png") no-repeat center;
    }

    #inputOperation .sel {
        background: url("/static/images/sel.png") no-repeat center;
    }

    #inputOperation .icon {
        float: left;
    }

    #inputOperation .btn span {
        float: left;
        margin-top: 4px;
        margin-left: 2px;
    }

    #inputOperation .btn {
        height: 24px;
        line-height: 1;
        border: none;
        background: #f8fafb;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 14px;
        color: #1f2d3d;
        margin-top: 29px;
        margin-right: 16px;
    }

    #inputOperation .btn-print {
        margin-right: 0;
    }

    #inputOperation .btn:hover {
        color: #5468ee;
    }

    #inputOperation .inner {
        margin: 0 20px;
    }

    #inputOperation .btn-nav {
        height: 60px;
        overflow: hidden;
    }

    #inputOperation .btn-nav .el-input .el-input__inner {
        height: 24px;
    }

    #inputOperation .btn-nav .el-input {
        float: left;
        margin-top: 29px;
        margin-right: 18px;
        width: 140px;
        height: 24px;
    }
</style>
<style>
    .steps {
        position: absolute;
        bottom: 10px;
        left: 30px;
        margin: auto;
    }

    .el-dialog__headerbtn {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .el-step__main {
        margin-left: -8px !important;
    }
</style>
<script>
    var inputOperation = new Vue({
        el: '#inputOperation',
        prop: {},
        data: function () {
            return {
                inputOperation: [],
                multipleSelection: [],
                multiSelect: false,
                date: [null, null],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                showLoading: false,
                currentPage: 1,
                pageSize: 10,

                formLabelWidth: '120px',       //表单 配置
                form: {
                    rkRkdjNo: '',
                    rkType: '',
                    rkRemarks: '',
                    rkDocsList: [],
                    bgGoodsNo: '',
                    selectGood: {
                        value: '',
                        bgGoodsName: '',
                        count: 0,
                        bgGoodsId: ''
                    },
                    saveARkDocsList: true,
                    deleteARkDocsList: true
                },     //表单 弹出层 信息集合
                dialogFormActive: 0,           //新建 弹出层 steps 当前进度
                dialogFormVisible: false,      //新建 弹出层 是否可见
                submitLoading: false,          //新建 弹出层 提交等待

                select: {},                  //搜索 弹出层 信息集合,
                dialogSelectVisible: false,
                selectLoading: false


            }
        },
        computed: {
            // TODO 表格提交
            option: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "dateStart": this.date[0],
                    "dateStop": this.date[1]
                }
            }
        },
        methods: {
            handleEdit: function (index, row) {
                console.log(index, row);
            },                                  //测试 行内按钮 有效性
            handleDelete: function (index, row) {
                console.log(index, row);
            },                                //测试 行内按钮 有效性

            filterStatus: function (value, row) {
                return row.status == value;
            },                                //状态 过滤函数
            statusWatch: function (status) {
                var str = '';
                switch (status) {
                    case '初始状态':
                        str = 'info';
                        break;
                    case '部分分配':
                        str = 'danger';
                        break;
                    case '全部分配':
                        str = 'warning';
                        break;
                    case '部分收货':
                        str = 'success';
                        break;
                    case '全部收货':
                        str = 'primary';
                        break;
                }
                return str;
            },                                     //状态 标签颜色

            typeWatch: function (type) {
                var str = '';
                switch (type) {
                    case '采购订单':
                        str = 'warning';
                        break;
                    case '仓间挑拨':
                        str = 'success';
                        break;
                    case '退货入库':
                        str = 'default';
                        break;
                }
                return str;
            },                                         //单据 标签颜色
            filterType: function (value, row) {
                return row.type == value;
            },                                  //单据 过滤函数

            multiSelectClick: function () {
                this.multiSelect = !this.multiSelect;
            },                                      //多选 状态维护
            handleSelectionChange: function (val) {
                /*<debug>*/
                console.log(this.multipleSelection);
                /*</debug>*/
                this.multipleSelection = val;
            },                              //多选 选中控制
            moreOperationDelete: function () {
                /*<debug>*/
                console.log('选中的删除');
                /*</debug>*/
                var listID = [];
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    remove(this.multipleSelection[i], this.inputOperation);
                    listID.push(this.inputOperation.rkdjNo);
                }
                postDelete(this, {
                    id: listID
                })

            },                                   //多选 删除

            handleSizeChange: function (val) {
                /*<debug>*/
                console.log('每页' + val + '条');
                /*</debug>*/
                this.pageSize = val;
                post(this, this.option);
            },                                   //分页 Size
            handleCurrentChange: function (val) {
                /*<debug>*/
                console.log('当前第' + val + '页');
                /*</debug>*/
                this.currentPage = val;
                post(this, this.option);
            },                                //分页 当前页

            newInput: function () {
                this.dialogFormVisible = true;
//                this.$msgbox({
//                    title: '消息',
//                    message: 'sadgasd',
//                    showCancelButton: true,
//                    confirmButtonText: '确定',
//                    cancelButtonText: '取消',
//                    beforeClose: function (action, instance, done) {
//                        done();
//                    }
//                });

            },                                              //按钮 新建入库单

            expandChange: function (row, expanded) {
                if (typeof (row.history) == 'undefined') {
                    postHistory(row);
                }
                console.log(row);
            },                             //下拉 选择

            rowSelection: function (row, selected) {
//                console.log(selected)
            },                             //选中 当前行
            hello: function (row, event, column) {
//                console.log(row);
//                this.$refs.table.$emit('toggleRowSelection', row, true);
//                console.log(row);
//                console.log(event);
//                console.log(column);
            },                               //测试 函数 --> 选中 当前行

            prev: function () {
                this.dialogFormActive--;
                this.$refs.carousel.prev();
            },                                                  //新建 弹出层banner控制 前一个
            next: function () {
                this.dialogFormActive++;
                this.$refs.carousel.next();
            },                                                  //新建 弹出层banner控制 后一个
            submit: function () {
                var _this = this;
                this.dialogFormActive++;
                this.submitLoading = true;
                //TODO 此处应是ajax请求
                setTimeout(function () {
                    _this.submitLoading = false;
                    _this.$notify({
                        title: '成功',
                        message: '保存成功！',
                        type: 'success'
                    });
                    _this.dialogFormVisible = false;
                    _this.form = {
                        rkRkdjNo: '',
                        rkType: '',
                        rkRemarks: '',
                        rkDocsList: [],
                        bgGoodsNo: '',
                        selectGood: {
                            value: '',
                            bgGoodsName: '',
                            count: 0,
                            bgGoodsId: ''
                        },
                        saveARkDocsList: true,
                        deleteARkDocsList: true
                    };
                    _this.dialogFormActive = 0;
                    _this.$refs.carousel.setActiveItem(0);
                    post(inputOperation);
                }, 1500);
            },                                                //新建 表单提交
            formValidateField: function (formName) {
//                console.log(inputOperation.$refs[formName]);
//                console.log(inputOperation.$refs);
//                setTimeout(function () {
//                    return inputOperation.$refs[formName].validate(function (valid) {
//                        console.log(valid);
//                        return valid;
//                    })
//                },0);
            },                             //表单 string验证
            querySearchAsync: function (queryString, cb) {
                postGoods(this, {bgGoodsNo: queryString}, cb);
            },
            GoodSelect: function (item) {
                this.form.saveARkDocsList = false;
                this.form.deleteARkDocsList = true;
                this.form.selectGood = item;
            },
            GoodClick: function (item) {
                this.form.saveARkDocsList = true;
                this.form.deleteARkDocsList = false;
                this.form.selectGood = item;
            },
            saveARkDocsList: function () {
                this.form.rkDocsList.push(this.form.selectGood);
                this.form.selectGood = {
                    value: '',
                    bgGoodsName: '',
                    count: 0
                };
                this.form.saveARkDocsList = true;
            },
            deleteARkDocsList: function () {
                remove(this.form.selectGood, this.form.rkDocsList);
                this.form.selectGood = {
                    value: '',
                    bgGoodsName: '',
                    count: 0
                };
            },

            selectSubmit: function () {
                this.dialogSelectVisible = false;
                console.log('select!');
            },
            deleteOlder: function (index, row) {
                var _this=this;
                _this.$confirm('此操作将永久删除该入库单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    remove(row, _this.inputOperation);
                    postDelete(_this, {
                        id: [row.rkdjNo]
                    });
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        watch: {
            inputOperation: function () {

            },
            form: function () {
                if (isNaN(this.form.selectGood.count)) {
                    this.saveARkDocsList = false;
                }
            }
        }
    });

    // 高级 监视器的 使用方法
    inputOperation.$watch('form.selectGood.count', function () {
        if (!this.form.deleteARkDocsList)return;
        var valid = false;
        inputOperation.$refs['newForm'].validate(function (_valid) {
            valid = _valid;
        });
        valid ?
            this.form.saveARkDocsList = false :
            this.form.saveARkDocsList = true
    });
    //    , {
    //        deep: true
    //    }

    post(inputOperation);
    function post(obj, option) {
        obj.showLoading = true;

        /*<debug>*/
        url = "/hock/form/inputOption.json";
        /*</debug>*/

        /*<prod>*/
        url = "/data/inputOption/" + option;
        /*</prod>*/

        $.ajax(url, {
            type: "GET",
            data: option | {
                "draw": 1,                      //* 没有意义
                "pageNum": 1,                   //* 当前页
                "pageSize": 10                  //* 每页大小
            },
            error: function (error) {
                errorTip(obj, error);
            },
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    var type = {
                        "0": "采购订单",
                        "1": "仓间挑拨",
                        "2": "退货入库"
                    };
                    var status = {
                        "31": "初始状态",
                        "32": "部分分配",
                        "33": "全部分配",
                        "34": "部分收货",
                        "35": "全部收货"
                    };
                    var method = {
                        "1": "手动",
                        "2": "excel",
                        "3": "接口"
                    };
                    json.data[i].type = type[i % 3];
                    json.data[i].sjsj = changeDate(json.data[i].sjsj);
                    json.data[i].status = status[json.data[i].status];
                    json.data[i].zdfs = method[json.data[i].zdfs];
                    json.data[i].number = 10120 + i;
                    json.data[i].volume = 200.0234 + i;
                    json.data[i].historyLoading = false;              //维护 history 的加载层
                }
                inputOperation.$data.inputOperation = json.data;
            },
            complete: function () {
                obj.showLoading = false;
            }
        });
    }
    function postHistory(obj, option) {
        obj.historyLoading = true;

        /*<debug>*/
        url = "/hock/form/inputOptionDetialHistory.json";
        /*</debug>*/

        /*<prod>*/
        url = "/data/inputOption/history";
        /*</prod>*/

        $.ajax(url, {
            type: "GET",
            data: option | {
                "id": 1                        //* 入库单号id
            },
            error: function (error) {
                errorTip(obj, error);
            },
            success: function (json) {
                for (var i = 0; i < json.history.length; i++) {
                    json.history[i].createTime = changeDate(json.history[i].createTime);
                }
                obj.history = json.history;
                obj.historyLength = json.history.length - 1;
            },
            complete: function () {
                obj.historyLoading = false;
            }
        });
    }
    function postDelete(obj, option) {
        //TODO 删除后重新post
        if (option.id.length < 1)return;
        obj.showLoading = true;

        /*<debug>*/
        url = "/hock/form/inputOptoionDelete.json";
        /*</debug>*/

        /*<prod>*/
        url = "/data/inputOption/delete" + option;
        /*</prod>*/

        $.ajax(url, {
            type: "GET",
            data: option | {
                "id": 1                        //* 入库单号id
            },
            error: function (error) {
                errorTip(obj, error);
            },
            success: function (json) {
                if (json.status == 1) {
                    obj.$notify({
                        title: '提示',
                        type: 'success',
                        message: obj.$createElement(
                            'p',
                            '删除完成'
                        )
                    });
                }
            },
            complete: function () {
                obj.showLoading = false;
            }
        });
    }
    function postGoods(obj, option, cb) {
        //TODO 此处应为AJAX请求,待完善 querySearchAsync

        /*<debug>*/
        url = "/hock/form/rkGoods.json";
        /*</debug>*/

        /*<prod>*/
        url = "/data/inputOption/delete" + option;
        /*</prod>*/

        $.ajax(url, {
            type: "GET",
            data: option | {
                "id": 1                        //* 入库单号id
            },
            error: function (error) {

            },
            success: function (json) {
                var step = [];
                var length = json.length > 20 ? 20 : json.length;
                for (var i = 0; i < length; i++) {
                    step.push({
                        bgGoodsId: json[i].bgGoodsId,
                        value: json[i].bgGoodsNo,
                        bgGoodsName: json[i].bgGoodsName,
                        count: 0
                    });
                }
                cb(step);
            },
            complete: function () {

            }
        });
    }
    function changeDate(date) {
        return dateFormat(new Date(date), 'MM-dd hh:mm');
    }
    function errorTip(obj, error) {                    // 错误提示
        /*<debug>*/
        console.log(error);
        /*</debug>*/
        obj.$alert(error.status + '\n' + error.statusText, '网络异常');
    }
    function dateFormat(date, fmt) {
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    function remove(obj, data) {
        for (var i = 0; i < data.length; i++) {
            var temp = data[i];
            if (!isNaN(obj)) {
                temp = i;
            }
            if (temp == obj) {
                for (var j = i; j < data.length; j++) {
                    data[j] = data[j + 1];

                    console.log(temp);
                }
                data.pop();
            }
        }
    }

</script>





